<template>
    <div class="login" ref="vantaRef">
        <div class="login-container">
            <div class="left-section">
                <h1 class="main-title"> <img src="../knowledge_graph/components/KnowledgeGraphItem/images/logo3.png" class="login-logo"> <div>课程知识图谱</div></h1>
                <div class="login-box">
                    <div class="login-form">
                        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form-el">
                            <div class="form-item">
                                <el-form-item prop="username">
                                    <el-input 
                                        v-model="loginForm.username" 
                                        placeholder="请输入用户名"
                                        prefix-icon="el-icon-user">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="form-item">
                                <el-form-item prop="password">
                                    <el-input 
                                        v-model="loginForm.password" 
                                        type="password" 
                                        placeholder="请输入密码"
                                        prefix-icon="el-icon-lock">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="form-item captcha-container">
                                <el-form-item prop="code">
                                    <el-input 
                                        v-model="loginForm.code" 
                                        placeholder="请输入验证码"
                                        prefix-icon="el-icon-key"
                                        class="captcha-input">
                                    </el-input>
                                </el-form-item>
                                <div class="captcha-box">
                                    <img v-if="captchaEnabled" :src="codeUrl" @click="getCode" class="login-code-img" style="cursor:pointer;max-width:100%;max-height:100%;"/>
                                    <span v-else style="color:#bbb;">验证码已关闭</span>
                                </div>
                            </div>
                            <div>还没有账号？点击<span class="gototxt"  @click="gotoRegister">去注册</span></div>
                            <el-button type="primary" class="login-button" @click="handleLogin" :loading="loading">登录</el-button>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="right-section">
                <div class="features">
                    <div class="feature-item" v-for="(item, index) in features" 
                         :key="index"
                         :style="{ animationDelay: index * 200 + 'ms' }">
                        <div class="feature-content">
                            <i :class="item.icon"></i>
                            <span class="feature-title">{{ item.title }}</span>
                        </div>
                        <p class="feature-desc">{{ item.desc }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as THREE from "three";
import WAVES from "vanta/src/vanta.waves";
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt';

export default{
    data() {
        return {
            codeUrl: "",
            loginForm: {
                username: '',
                password: '',
                code: '',
                rememberMe: false,
                uuid: ''
            },
            loginRules: {
                username: [
                    { required: true, trigger: "blur", message: "请输入您的账号" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "请输入您的密码" }
                ],
                code: [
                    { required: true, trigger: "change", message: "请输入验证码" }
                ]
            },
            loading: false,
            captchaEnabled: true,
            goto: false,
             // 注册开关
             register: false,
            redirect: undefined,
            features: [
                { 
                    title: '知识图谱', 
                    icon: 'el-icon-share',
                    desc: '可视化展示知识点关联，辅助系统学习'
                },
                { 
                    title: '智能出题', 
                    icon: 'el-icon-edit-outline',
                    desc: '基于知识图谱的智能题目推荐'
                },
                { 
                    title: '专项训练', 
                    icon: 'el-icon-data-analysis',
                    desc: '针对性强化训练，查漏补缺'
                },
                { 
                    title: '错题分析', 
                    icon: 'el-icon-document-delete',
                    desc: '深入分析错题原因，提供改进建议'
                }
            ]
        }
    },
    watch: {
        $route: {
            handler: function(route) {
                this.redirect = route.query && route.query.redirect;
            },
            immediate: true
        }
    },
    created() {
        this.getCode();
        this.getCookie();
    },
    mounted() {
        this.vantaEffect = WAVES({
            el: this.$refs.vantaRef,
            THREE: THREE,
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            shininess: 35.00,
            waveHeight: 23.00,
            waveSpeed: 0.65,
            zoom: 0.98
        });
    },
    beforeDestroy() {
        if (this.vantaEffect) {
            this.vantaEffect.destroy();
        }
    },
    methods: {
        getCode() {
            getCodeImg().then(res => {
                this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
                if (this.captchaEnabled) {
                    this.codeUrl = "data:image/gif;base64," + res.img;
                    this.loginForm.uuid = res.uuid;
                }
            });
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get('rememberMe');
            this.loginForm = {
                ...this.loginForm,
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
            };
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, { expires: 30 });
                        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove('rememberMe');
                    }
                    this.$store.dispatch("Login", this.loginForm).then(() => {
                        this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
                    }).catch(() => {
                        this.loading = false;
                        if (this.captchaEnabled) {
                            this.getCode();
                        }
                    });
                }
            });
        },
        gotoRegister(){
            this.$router.push('/register');
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-container {
    width: 1000px;
    height: 600px;
    display: flex;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.left-section {
    width: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .main-title {
        text-align: center;
        display: flex;
        align-items: center;
        color: #6b8cfb;
        font-size: 46px;
        font-weight: bold;
        letter-spacing: 4px;
        text-shadow: 0 2px 4px rgba(107, 140, 251, 0.2);
        margin-bottom: 60px;
    }
}

.right-section {
    width: 50%;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;

    .features {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 0 20px;
    }
}

.login-box {
    width: 100%;

    .login-form {
        .form-item {
            margin-bottom: 25px;

            .el-input {
                ::v-deep .el-input__inner {
                    border-radius: 25px;
                    height: 45px;
                    padding-left: 45px;
                    border: 1px solid #dcdfe6;
                    background: rgba(255, 255, 255, 0.9);
                    
                    &:focus {
                        border-color: #409eff;
                    }
                }

                ::v-deep .el-input__prefix {
                    left: 15px;
                    font-size: 16px;
                    color: #909399;
                }
            }
        }

        .captcha-container {
            display: flex;
            gap: 10px;

            .captcha-input {
                flex: 1;
            }

            .captcha-box {
                width: 100px;
                height: 45px;
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                color: #666;
            }
        }

        .login-button {
            width: 100%;
            height: 45px;
            border-radius: 25px;
            font-size: 16px;
            letter-spacing: 2px;
            background: linear-gradient(135deg, #6e8efb, #4a73f8);
            border: none;
            margin-top: 40px;
            
            &:hover {
                background: linear-gradient(135deg, #4a73f8, #6e8efb);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(110, 142, 251, 0.4);
            }
        }
    }
}

.feature-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    padding: 15px 25px;
    border-radius: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.5s ease forwards;
    opacity: 0;
    transform: translateY(-20px);
    height: 70px;

    &:nth-child(1) {
        background: #cca8e9;
    }
    &:nth-child(2) {
        background:#38b48b ;
    }
    &:nth-child(3) {
        background: #00b8a9;
    }
    &:nth-child(4) {
        background:#fca180 ;
    }

    &:hover {
        transform: translateX(10px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        filter: brightness(1.1);
    }

    .feature-content {
        display: flex;
        align-items: center;
        margin-bottom: 4px;

        i {
            font-size: 22px;
            color: #ffffff;
            margin-right: 12px;
        }

        .feature-title {
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
        }
    }

    .feature-desc {
        font-size: 14px;
        color: #f0f0f4;
        margin: 0;
        line-height: 1.2;
        text-align: center;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.login-logo{
    width: 40px;
    height: 40px;
}
.gototxt{
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
}
.gototxt:hover{
    color: #587df9;
}
</style>